$white: #fff;

#head {
    position: relative;
    .navbar {
        width: 100%;
        position: absolute;
        z-index: 100;
        background: transparent;
        border: none;
        margin-top: 70px;
        a {
            color: black;
            font-size: 24px;
            font-weight: bold;
            &:hover {
                color: #f00;
            }
        }
        @media screen and (max-width: 768px) {
            margin-top: 0;
            background: #E7E7E7;
        }
        .navbar-brand {
            display: none;
            @media screen and (max-width: 768px) {
                display: inline-block;
            }
        }
        .navbar-collapse {
            white-space: nowrap;
            padding: 0 10%;
            @media screen and (min-width: 1600px) {
                padding: 0 13%;
                padding-right: 16%;
            }
            .navbar-nav {
                > li {
                    margin-right: 10px;
                    position: relative;
                    @media screen and (min-width: 1600px) {
                        margin-right: 30px;
                    }
                    .child-menu {
                        position: absolute;
                        left: 15px;
                        padding: 0 10px;
                        height: 0;
                        transition: height .8s;
                        overflow: hidden;
                        border: 0;
                        li {
                            padding: 10px 0;
                            a {
                                color: #fff;
                            }
                        }
                        &::before {
                            position: absolute;
                            z-index: -1;
                            background: rgba(51, 51, 51, .6);
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                            content: '';
                            -webkit-filter: blur(10px); /* Chrome, Opera */
                            -moz-filter: blur(10px);
                            -ms-filter: blur(10px);
                            filter: blur(10px);
                        }
                    }
                    &:hover {
                        .child-menu {
                            border-top: 5px solid #f00;
                            display: block;
                            height: 87px;
                            a:hover {
                                color: #f00;
                            }
                        }
                    }
                }
            }
            .logo {
                position: absolute;
                left: 50%;
                margin-left: -7%;
                margin-top: -60px;
                width: 180px;
                li {
                    float: none;
                    text-align: center;
                    margin: 0 auto;
                }
                img {
                    width: 100%;
                }
                @media screen and (max-width: 768px) {
                    display: none;
                }
            }
            .navbar-form {
                .form-group {
                    width: 320px;
                    background: white;
                    height: 40px;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                    @media screen and (max-width: 1600px) {
                        width: 260px;
                    }
                    .form-search {
                        height: 100%;
                        width: 240px;
                        border: none;
                        outline: none;
                        padding-left: 33px;
                        background: url("../images/search.png") no-repeat 2px 4px;
                        @media screen and (max-width: 1600px) {
                            width: 180px;
                        }
                    }
                    .form-search-btn {
                        border: 0;
                        background: #333;
                        color: white;
                        width: 65px;
                        height: 24px;
                        outline: none;
                        border-radius: 4px;
                        &:active {
                            background: #666;
                        }
                    }
                }
            }
        }
    }
    .banner {
        .swiper-container {
            .swiper-slide {
                img {
                    width: 100vw;
                    vertical-align: text-top;
                }
            }
        }
        .swiper-pagination {
            bottom: 15%;
            padding-left: 60%;
            height: 34px;
            line-height: 34px;
            .swiper-pagination-bullet {
                background: $white;
                border-radius: 4px;
                vertical-align: middle;
                width: 40px;
                height: 36px;
                opacity: 1;
                font-size: 0;
                background: url("../images/number_none.png") no-repeat;
                &.swiper-pagination-bullet-active {
                    background: url("../images/sprite.png") no-repeat -836px -273px;
                    font-size: 18px;
                }
            }
            @media screen and (max-width: 768px) {
                height: 34px;
                bottom: 10%;
                line-height: 34px;
                .swiper-pagination-bullet {
                    width: 17px;
                    height: 17px;
                    background-size: 17px 17px;
                    &.swiper-pagination-bullet-active {
                        background-size: 17px 17px;
                    }
                }
            }
        }
    }
}

#aside {
    padding: 60px 0;
    text-align: center;
}

#section {
    width: 80%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 150px;
    > .row {
        .img-box {
            padding: 0;
            &.news-image {
                position: relative;
                .img-responsive {
                    width: 100%;
                    box-shadow: 1px 6px 12px 5px #eed4be;
                }
                .triangle {
                    position: absolute;
                    width: 40px;
                    top: 50%;
                    right: -7%;
                    margin-top: -20px;
                    transition: right .5s;
                    @media screen and (max-width: 768px) {
                        display: none;
                    }
                    &.triangle-pic2 {
                        left: -7%;
                        right: 0;
                        transition: left .5s;
                        transform: rotate(180deg);
                    }
                }
            }
            &.news-article {
                color: #b3b2b2;
                font-size: 28px;
                overflow: hidden;
                @media screen and (max-width: 768px) {
                    padding: 40px;
                    font-size: 20px;
                }
                .title {
                    font-size: 60px;
                    @media screen and (max-width: 768px) {
                        font-size: 30px;
                    }
                }
                .icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 34px;
                    height: 32px;
                    background: url("../images/sprite.png") no-repeat -34px -35px;
                    &.icon-bottom {
                        left: 0;
                        bottom: 0;
                        right: auto;
                        top: auto;
                        background-position: -943px -273px;
                    }
                }
            }
        }
        &:hover {
            .img-box {
                &.news-image {
                    .triangle {
                        right: -2%;
                        &.triangle-pic2 {
                            left: -2%;
                        }
                    }
                }
            }
        }
    }
}
// 页脚